<style lang="less">
  .ue-tool-bar {
    background: #f2f2f2;
    overflow: hidden;
    margin: 0px 0px 10px 0px;
    padding-bottom: 5px;
    .el-date-editor, .el-select, .el-input, .el-cascader {
      width: 100%;
    }
    .el-form-item {
      background: #f2f2f2;
      padding: 10px 0 1px 0;
      margin: 0px;
    }
  }

  .toolbar_collapse {
    height: 45px;
    position: relative;
    overflow: hidden;
    transition: height 0.6s;
  }

  .toolbar_open {
    transition: height 0.6s ease;
  }
</style>

<template>
  <el-col :span="24" class="ue-tool-bar" :class="moreOpt?'toolbar_open':'toolbar_collapse'">
    <div v-if="data.length===0" class="el-table__empty-text">{{ emptyText || '暂未配置查询条件' }}</div>
    <el-form :label-position="labelPosition" :label-width="labelWidth">
      <el-col :span="23">
        <slot>
        </slot>
        <el-col :span="8" v-for="item in data" :key="item.id">
          <el-form-item :label="item.fieldLabel">
            <el-input
              v-if="item.type === 'input'"
              v-model="form[item.fieldName]">
            </el-input>
            <el-date-picker
              v-model="form[item.fieldName]"
              v-if="item.type === 'date'"
              type="date">
            </el-date-picker>
            <el-date-picker
              v-model="form[item.fieldName]"
              v-if="item.type === 'daterange'"
              type="daterange">
            </el-date-picker>
            <el-select
              v-model="form[item.fieldName]"
              v-if="item.type === 'select'"
              placeholder="请选择">
              <el-option
                v-for="o in $store.getters[item.option]"
                :key="o[item.value]"
                :label="o[item.label]"
                :value="o[item.value]">
              </el-option>
            </el-select>
            <el-cascader
              v-model="form[item.fieldName]"
              v-if="item.type === 'cascader'"
              :props="{value:item.value,label:item.label}"
              :options="$store.getters[item.option]||[]">
            </el-cascader>
            <address-select
              v-if="item.type === 'addressDict'"
              v-model="form[item.fieldName]"
              placeholder="请选择地址"></address-select>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="1" style="padding: 10px 10px 0px 0px;text-align: right">
        <i class="fa fa-lg" :class="moreOpt?'fa-angle-double-up':'fa-angle-double-down'"
           v-bind:style="{display: (data.length>3?'inline-block':'none')}" @click="moreOpt = !moreOpt"
           style="cursor: pointer"></i>
      </el-col>
    </el-form>
  </el-col>
</template>

<script>
  export default {
    data () {
      return {
        moreOpt: false,
        form: {}
      };
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return [];
        }
      },
      emptyText: String,
      value: {
        type: Object,
        default: {}
      },
      labelWidth: {
        default: '140px'
      },
      labelPosition: {
        default: 'right'
      }
    },
    methods: {
      reset () {
        this.$ue.resetObjNull(this.form);
      }
    },
    mounted () {
      let self = this;
      this.data.forEach(o => {
        const fieldName = o.fieldName;
        const replace = fieldName.replace(/_/g, '.');
        this.$set(this.form, fieldName, ((o.type === 'input' || o.type === 'date' || o.type === 'select') ? null : []));
        if (o.type === 'input' || o.type === 'select') {
          this.$watch('form.' + fieldName, function (newVal, oldVal) {
            self.value[(o.opt || 'EQ') + '_' + replace] = newVal;
          });
        }
        if (o.type === 'date') {
          this.$watch('form.' + fieldName, function (newVal, oldVal) {
            self.value[(o.opt || 'EQ') + '_' + replace] = (newVal ? newVal.toJSON() : null);
          });
        }

        if (o.type === 'daterange') {
          this.$watch('form.' + fieldName, function (val, oldVal) {
            if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
              self.value[(o.opt || 'GTE') + '_' + replace] = val[0].toJSON();
              self.value[(o.opt || 'LTE') + '_' + replace] = val[1].toJSON().replace('00:00:00', '23:59:59');
            } else {
              self.value[(o.opt || 'GTE') + '_' + replace] = null;
              self.value[(o.opt || 'LTE') + '_' + replace] = null;
            }
          });
        }
        if (o.type === 'cascader') {
          this.$watch('form.' + fieldName, function (val, oldVal) {
            self.value[(o.opt || 'EQ') + '_' + replace] = (val.length > 0 ? val[val.length - 1] : null);
          });
        }
        if (o.type === 'addressDict') {
          this.$watch('form.' + fieldName, function (val, oldVal) {
            self.value[(o.opt || 'EQ') + '_' + replace] = (val.length > 0 ? val[val.length - 1] : null);
          });
        }
      });
    }
  };
</script>


